<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>订单列表</title>
	<link rel="stylesheet" href="./css/index.css">
    <script src="./js/rem.js"></script>
</head>
<body>
    <div id="app">
        <!-- 顶部 -->
        <div class="header">
            <div class="arrows">
                <img src="img/back.png" alt="">
            </div>
            <div class="title">订单列表</div>
            <div class="home">
                <img src="img/qhome.png" alt="">
            </div>
        </div>
        <!-- 交易成功 -->
        <div class="trading">
            <div class="transaction">
                <img src="img/supchok.png" alt="">
                <p>交易成功</p>
            </div>
        </div>
        <!-- 信息 -->
        <div class="recipients">
            <div class="location">
                <img src="img/position.png" alt="">
            </div>
            <div class="message">
                <span>收货人：小林&nbsp15438766763</span>
                <span>收获地址:北京北京市海淀区清河街道安宁庄<br />
                    西路宣海家园11号</span>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 水果超市 -->
        <div class="supermarket-box">
            <div class="supermarket">
                <img src="img/gift1.png" alt="">
                <p>农家果院水果超市</p>
            </div>
        </div>
        <!-- 商品 -->
        <div class="commodity">
            <div class="commodity-item">
                <div class="item-img">
                    <a href="">
                        <img src="img/food2.png" alt="">
                    </a>
                </div>
                <div class="item-text">
                    <div class="item-title">
                        [海报畅销]草原休闲奶酪<br />酸奶条150g/袋
                    </div>
                    <div class="genre">
                        颜色：米黄&nbsp(香甜型)
                    </div>
                    <span>×1</span>
                </div>
                <span class="pirce">￥&nbsp6.80</span>
            </div>
            <div class="commodity-item">
                <div class="item-img">
                    <a href="">
                        <img src="img/apple.jpg" alt="">
                    </a>
                </div>
                <div class="item-text">
                    <div class="item-title">
                        【中华特色】渭南馆&nbsp泉盛隆<br />冷藏国产苹果类
                    </div>
                    <div class="genre">
                        颜色：红黄&nbsp(香甜型)
                    </div>
                    <span>×1</span>
                </div>
                <span class="pirce">￥&nbsp16.80</span>
            </div>
            <div class="commodity-item">
                <div class="item-img">
                    <a href="">
                        <img src="img/apple2.jpg" alt="">
                    </a>
                </div>
                <div class="item-text">
                    <div class="item-title">
                        甘肃特产 静宁黄元帅苹果<br />香甜酥软 宝宝老人挖泥吃
                    </div>
                    <div class="genre">
                        颜色：粉面沙棉
                    </div>
                    <span>×1</span>
                </div>
                <span class="pirce">￥&nbsp9.80</span>
            </div>
            <div class="commodity-pice">
                <div class="discounts">
                    <p>店铺优惠</p>
                    <p>-￥34.00</p>
                </div>
                <div class="total">
                    <p>订单总价</p>
                    <p>￥138.00</p>
                </div>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 水果超市 -->
        <div class="supermarket-box">
            <div class="supermarket">
                <img src="img/gift1.png" alt="">
                <p>农家果院水果超市</p>
            </div>
        </div>
        <!-- 联系卖家 -->
        <div class="relation">
            <div class="relation-left">
                <a href="#">
                    <img src="img/callout.png" alt="">
                    <p>联系卖家</p>
                </a>
            </div>
            <div class="relation-right">
                <a href="#">
                    <img src="img/comein.png" alt="">
                    <p>进入店铺</p>
                </a>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 订单 -->
        <div class="order">
            <div class="management">
                订单编号：1512416963576882
            </div>
            <div class="alipay">
                支付宝交易号：2015112421001001550234697927
            </div>
            <div class="creation">
                创建时间：2018-11-24 09：58：06
            </div>
            <div class="payment">
                付款时间：2018-11-244 09：58：20
            </div>
            <span class="box">
                复制
            </span>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 想要 -->
        <div class="shui">
            <div class="shui-up">
                <p>你可能还想要</p>
            </div>
            <div class="shui-di">
                <div class="one">
                    <img src="img/fruit.png" alt="">
                </div>
                <div class="one">
                    <img src="img/apple2.jpg" alt="">
                </div>
                <div class="one">
                    <img src="img/apple.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</body>

</html>